* {
  box-sizing: border-box;
}

html, body {
  /*移动端的页面是满屏*/
  width: 100%;
  height: 100%;
}

body {
  font-size: 14px;
  font-family: '微软雅黑';

}

.container {
  /*iphone6为主*/
  max-width: 750px;
  width: 750px;
  height: 100%;

  min-width: 320px;
  /*后面在使用rem进行布局的调整*/
  margin: 0 auto;
  border: 1px solid red;

  display: flex;
  flex-direction: column;
}

/*

https://uiiiuiii.com/screen/ios.htm

*/

/*移动端页面的设计规范 navbar*/
/*底部 tabbar*/
/*使用 flex 进行布局圣杯布局 头和尾固定 中间内容滚动*/
.header {
  width: 100%;
  height: 88px;
  background-color: #f00;

}

.content {
  width: 100%;
  flex: 1;
  /*代表垂直方向的内容超过 flex 剩余的高度出现垂直滚动条*/
  overflow-x: hidden;
  overflow: auto;
  background-color: #00cccc;

}


.footer {
  width: 100%;
  height: 100px;
  background-color: #0f0;
}


